<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="icon"
	href="https://jscdn.com.cn/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* css 代码  */
</style>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script
	src="https://code.highcharts.com.cn/highcharts/highcharts-more.js"></script>
<script
	src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script
	src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
	<div id="container"
		style="height: 800px; margin: auto; min-width: 1000px; max-width: 1000px"></div>
	<script>
		var chart = Highcharts
				.chart(
						'container',
						{
							chart : {
								type : 'boxplot'
							},
							title : {
								text : ''
							},
							credits : {
								enabled : false
							},
							legend : {
								enabled : true,
								itemStyle : {
									fontSize : '18px'
								}
							},
							exporting : {
								sourceWidth : 1280,
								sourceHeight : 720,
								scale : 1
							},
							xAxis : [ {
								categories : [ '0.2', '0.4', '0.6' ],
								title : {
									text : 'Scheduled ratio',
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "18px",
										"fontFamily" : "Time New Roman"
									}
								},
								labels : {
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "18px",
										"fontFamily" : "Time New Roman"
									}
								},
								tickWidth : 1,
								tickmarkPlacement : 'on'
							}, {
								lineWidth : 1,
								opposite : true,
								title : {
									text : '',
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "18px",
										"fontFamily" : "Time New Roman"
									}
								},
								labels : {
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "18px",
										"fontFamily" : "Time New Roman"
									},
									enabled : false
								},
								tickWidth : 0,
								//tickmarkPlacement : 'on',
								showLastLabel : true,
								tickInterval : 0.1,
								min : 0,
								max : 10
							} ],
							yAxis : {
								title : {
									text : 'Average Cmax',
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "18px",
										"fontFamily" : "Time New Roman"
									}
								},
								labels : {
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "18px",
										"fontFamily" : "Time New Roman"
									}
								}
							},
							plotOptions : {
								boxplot : {
									lineWidth : 3,
									medianWidth : 3,
									stemWidth : 3,
									whiskerWidth : 2
								}
							},
							tooltip : {
								pointFormat : '<span style="color:{point.color}">\u25CF</span> <b> {series.name}</b><br/>'
										+ // eslint-disable-line no-dupe-keys
										'最大值: {point.high}<br/>'
										+ 'Q2\t: {point.q3}<br/>'
										+ '中位数: {point.median}<br/>'
										+ 'Q1\t: {point.q1}<br/>'
										+ '最小值: {point.low}<br/>'
							},
							series : [
									{
										name : 'DDDQNPR',
										data : [
												[ 3437, 3564.75, 3601, 3653.75,
														3802 ],
												[ 3492, 3570.75, 3620.5,
														3664.25, 3773 ],
												[ 3508, 3576.5, 3644, 3716.25,
														3843 ] ],
										tooltip : {
											headerFormat : '<em>实验号码： {point.key}</em><br/>'
										}
									},

									{
										name : 'GA_PRIORITY_CODE',
										data : [
												[ 3528, 3605.25, 3647, 3689.75,
														3812 ],

												[ 3558, 3642, 3663.5, 3692.75,
														3753 ],
												[ 3567, 3679.5, 3709, 3734,
														3774 ] ],
										tooltip : {
											headerFormat : '<em>实验号码： {point.key}</em><br/>'
										}
									},
									{
										name : 'GA_RULE_CODE',
										data : [
												[ 3468, 3581.25, 3624.5, 3653,
														3764 ],
												[ 3493, 3593.75, 3631.5,
														3651.75, 3707 ],
												[ 3576, 3670.75, 3692.5, 3720,
														3786 ] ],
										tooltip : {
											headerFormat : '<em>实验号码： {point.key}</em><br/>'
										}
									},
									{
										name : 'Best rule',
										data : [
												[ 3741, 3829, 3897.5, 3946.5,
														4184 ],
												[ 3668, 3841.25, 3901, 3976,
														4149 ],
												[ 3741, 3881, 3956.5, 4045.75,
														4265 ] ],
										tooltip : {
											headerFormat : '<em>实验号码： {point.key}</em><br/>'
										}
									},
									{
										name : 'DDDQNPR异常值',
										type : 'scatter',
										data : [ [ 0.93, 3819 ],
												[ 4.26, 3779 ], [ 7.59, 3946 ],
												[ 7.59, 4008 ] ],
										tooltip : {
											headerFormat : '<em>实验号码： {point.key}</em><br/>'
										},
										xAxis : 1,
										color : Highcharts.getOptions().colors[0],
										showInLegend : false,
										marker : {
											enabled : true,
											symbol : 'circle',
											radius : 5
										},
									},
									{
										name : 'PRIORITY异常值',
										type : 'scatter',
										data : [ [ 1.43, null ],
												[ 4.76, null ], [ 8.09, null ] ],
										tooltip : {
											headerFormat : '<em>实验号码： {point.key}</em><br/>'
										},
										xAxis : 1,
										showInLegend : false,
										color : Highcharts.getOptions().colors[1],
										marker : {
											enabled : true,
											symbol : 'circle',
											radius : 5
										},
									},
									{
										name : 'RULE异常值',
										type : 'scatter',
										data : [ [ 1.93, null ],
												[ 5.26, null ], [ 8.59, null ] ],
										tooltip : {
											headerFormat : '<em>实验号码： {point.key}</em><br/>'
										},
										xAxis : 1,
										color : Highcharts.getOptions().colors[2],
										showInLegend : false,
										marker : {
											enabled : true,
											symbol : 'circle',
											radius : 5
										},
									},
									{
										name : 'BEST异常值',
										type : 'scatter',
										data : [ [ 2.43, null ],
												[ 5.76, 4277 ], [ 9.09, null ] ],
										tooltip : {
											headerFormat : '<em>实验号码： {point.key}</em><br/>'
										},
										xAxis : 1,
										color : Highcharts.getOptions().colors[3],
										showInLegend : false,
										marker : {
											enabled : true,
											symbol : 'circle',
											radius : 5
										},
									} ]
						});
	</script>
</body>
</html>